<template>
  <div>
    <div>
      <!-- input输入框，一排三列显示 -->
      <p-form layout="inline" @keyup.enter.native="searchQuery">
        <e-col span="8">
          <p-form-item label="编码规则">
            <p-input placeholder="20200509001"></p-input>
          </p-form-item>
        </e-col>
        <e-col span="8">
          <p-form-item label="规则名称">
            <p-input placeholder="请输入"></p-input>
          </p-form-item>
        </e-col>
        <e-col span="8">
          <p-form-item label="应用范围">
            <p-select placeholder="请输入" style="width:200px">
              <p-select-option value="lucy">请选择</p-select-option>
              <p-select-option value="lucy">天线车间</p-select-option>
              <p-select-option value="lucy">设备车间</p-select-option>
              <p-select-option value="lucy">生产车间</p-select-option>
            </p-select>
          </p-form-item>
        </e-col>
      </p-form>
    </div>
    <div>
      <p-table :columns="columns" :data-source="data" bordered>
        <template slot="editField" slot-scope="editField">
          <!-- 下拉选择框  禁用子选项用属性：disabled-->
          <p-select default-value="请选择" style="width:100%" @change="handleChange">
            <p-select-option value="排班工序规则">排班工序规则</p-select-option>
            <p-select-option value="首次排班规则">首次排班规则</p-select-option>
            <p-select-option value="排班参照生成规则">排班参照生成规则</p-select-option>
            <p-select-option value="工序技能规则">工序技能规则</p-select-option>
          </p-select>
        </template>

        <template slot="ruleDefinition" slot-scope="ruleDefinition">
          <!-- 下拉选择框  禁用子选项用属性：disabled-->
          <p-select default-value="请选择" style="width:100%" @change="handleChange">
            <p-select-option value="一级工序">一级工序</p-select-option>
            <p-select-option value="二级工序">二级工序</p-select-option>
            <p-select-option value="工站">工站</p-select-option>
            <p-select-option value="人工排班">人工排班</p-select-option>
            <p-select-option value="自动排班">自动排班</p-select-option>
            <p-select-option value="同类产品同班级">同类产品同班级</p-select-option>
            <p-select-option value="同班级">同班级</p-select-option>
            <p-select-option value="同类产品">同类产品</p-select-option>
            <p-select-option value="技能操作时间优先">技能操作时间优先</p-select-option>
            <p-select-option value="无技能默认为空">无技能默认为空</p-select-option>
            <p-select-option value="未达标见习人员默认不显示">未达标见习人员默认不显示</p-select-option>
            <p-select-option value="关键岗位显示见习员工">关键岗位显示见习员工</p-select-option>
            <p-select-option value="关键岗位不显示见习期员工">关键岗位不显示见习期员工</p-select-option>
          </p-select>
        </template>

        <template slot="enabled" slot-scope="enabled">
            <!-- 下拉选择框  禁用子选项用属性：disabled-->
            <p-switch default-checked @change="onChange" />
        </template>

        <template slot="operation" slot-scope="operation">
            <!-- 下拉选择框  禁用子选项用属性：disabled-->
            <a href="" style="color:#ff0000">删除</a>
        </template>
      </p-table>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "serialNumber",
    width: "20px",
    align: "center",
    scopedSlots: { customRender: "serialNumber" },
  },
  {
    title: "规则字段",
    dataIndex: "editField",
    //width:"25%",
    align: "center",
    scopedSlots: { customRender: "editField" },
  },
  {
    title: "规则定义",
    dataIndex: "ruleDefinition",
    //width:"25%",
    align: "center",
    scopedSlots: { customRender: "ruleDefinition" },
  },
  {
    title: "周期",
    dataIndex: "period",
    width:"80px",
    align: "center",
    scopedSlots: { customRender: "period" },
  },
  {
    title: "是否启动",
    dataIndex: "enabled",
    width:"100px",
    align: "center",
    scopedSlots: { customRender: "enabled" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    align: "center",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    serialNumber: `${i}`,
    editField: "",
    ruleDefinition: "",
    period: "",
    enabled: "",
    operation: "",
  });
}
export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>

<style scoped lang="less">
.tr {
  height: 40px;
}
</style>